/**
 * SPDX-FileCopyrightText: 2023-2025 Sangfor Technologies Inc.
 * SPDX-License-Identifier: Mulan PSL v2
 */
<template>
    <sf-form ref="form"
             class="resource-config__form">
        <sf-fieldlabel class="p-l0">
            <lang>{{ labelName }}</lang>
        </sf-fieldlabel>
        <div
            class="resource-config__container"
            :style="{ width: defaultWidth + 'px' }">
            <div class="resource-form__option-content">
                <slot name="cpu_content"></slot>
                <div class="option-content__option-input">
                    <i class="iconfont iconCPU"></i>
                    <lang>CPU资源</lang>
                    <sf-numberfield
                        v-model="submitData.cpuNum"
                        :min-value="usePageIsUser ? 1 : 4"
                        :allow-decimals="allowDecimals"
                        :default-width="60" />
                    <lang>核</lang>
                </div>
                <div class="option-content__option-slider">
                    <div class="option-slider__text">
                        <div>
                            <lang>{{ usePageIsUser ? 1 : 4 }}核</lang>
                        </div>
                        <div>(MIN)</div>
                    </div>
                    <el-slider
                        v-model="submitData.cpuNum"
                        class="option-slider__sxf-slider"
                        tooltip-class="sxf-slider__tooltip"
                        :min="usePageIsUser ? 1 : 4"
                        :max="resourceNums.cpu" />
                    <div class="option-slider__text">
                        <div>{{ _("{0}核", resourceNums.cpu) }}</div>
                        <div>(MAX)</div>
                    </div>
                </div>
            </div>
            <div v-if="showGpu"
                 class="resource-form__option-content">
                <slot name="gpu_content"></slot>
                <div class="option-content__option-input">
                    <i class="iconfont iconCPU"></i>
                    <lang>GPU资源</lang>
                </div>
                <div>

                    <sf-form-item v-if="usePageIsUser" class="flex-center m-t10">
                        <sf-fieldlabel :labelWidth="150">
                            <lang>分配显存大小（GB）</lang>
                        </sf-fieldlabel>
                        <div class="resource-form__option-gpu">
                            <span class="resource-form__option-gpu-reduce" @click="onChangeGpu('-8')">-</span>
                            <span class="resource-form__option-gpu-add" @click="onChangeGpu('8')">+</span>
                            {{ submitData.vGpuMemory }}
                        </div>
                    </sf-form-item>

                    <div v-if="!usePageIsUser">
                        <p class="resource-form__vgpu-show">可用显存：{{ maxvGpuMemoryRemain }} GB</p>
                        <sf-form-item class="flex-center m-t10">
                            <sf-fieldlabel class="workspace">
                                <lang>GPU类型</lang>
                            </sf-fieldlabel>
                            <sf-select
                                    v-model="submitData.vGpuDisplayName"
                                    :placeholder="_('请选择')"
                                    :default-width="200"
                                    display-field="vGpuDisplayName"
                                    value-field="vGpuDisplayValue"
                                    :options="vGpuDisplayNameOpts"></sf-select>
                        </sf-form-item>
                        <sf-form-item class="flex-center m-t10 resource-form__vgpu-num">
                            <sf-fieldlabel class="workspace">
                                <lang>分配个数</lang>
                            </sf-fieldlabel>
                            <sf-numberfield
                                    ref="vGpuNumRef"
                                    v-model="submitData.vGpuNum"
                                    :allow-decimals="false"
                                    :mask-re="/\d/"
                                    :min-value="0"
                                    :max-value="maxvGpuNum"
                                    :default-disabled="!submitData.vGpuDisplayName"
                                    :default-width="200"></sf-numberfield>
                            <span class="resource-form__vgpu-show-max">MAX: {{ maxvGpuNum }}个</span>
                        </sf-form-item>

                    </div>

                </div>
            </div>
            <div class="resource-form__option-content">
                <slot name="memorySize_content"></slot>
                <div class="option-content__option-input">
                    <i class="iconfont iconneicun"></i>
                    <lang>内存资源</lang>
                    <sf-numberfield
                            v-model="submitData.memorySize"
                            :min-value="usePageIsUser ? 1 : 4"
                            :allow-decimals="allowDecimals"
                            :default-width="60"></sf-numberfield>
                    <lang>GB</lang>
                </div>
                <div class="option-content__option-slider">
                    <div class="option-slider__text">
                        <div>{{ usePageIsUser ? 1 : 4 }}GB</div>
                        <div>(MIN)</div>
                    </div>
                    <el-slider
                            v-model="submitData.memorySize"
                            class="option-slider__sxf-slider"
                            tooltip-class="sxf-slider__tooltip"
                            :min="usePageIsUser ? 1 : 4"
                            :max="resourceNums.memory" />
                    <div class="option-slider__text">
                        <div>{{ resourceNums.memory }}GB</div>
                        <div>(MAX)</div>
                    </div>
                </div>
            </div>
            <slot></slot>
        </div>
    </sf-form>
</template>

<style lang="less">
.resource-config__form {
    display: flex;
    padding: 0;
    .sfv-fieldlabel {
        margin-top: 10px;
    }
}
.resource-config__container {
    margin-left: 4px;
    /* width: 336px; */
    .resource-form__vgpu-show {
        margin-left: 100px;
    }
    .resource-form__vgpu-num {
        position: relative;
    }
    .resource-form__vgpu-show-max {
        position: absolute;
        right: 75px;
    }
    .resource-form__option-content {
        border: 1px solid #dddddd;
        border-radius: 2px;
        padding: 10px 20px;
        margin-bottom: 10px;
        margin-top: 0;
        background: #fff;
        .option-content__option-input {
            line-height: 32px;
        }
        .resource-form__option-gpu {
            width: 150px;
            height: 32px;
            line-height: 32px;
            text-align: center;
            border: 1px solid rgb(224, 224, 224);
            position: relative;
        }
        .resource-form__option-gpu-reduce, .resource-form__option-gpu-add {
            display: inline-block;
            position: absolute;
            width: 20px;
            height: 100%;
            background: #f7f8fa;
            cursor: pointer;
        }
        .resource-form__option-gpu-reduce {
            left: 0;
            border-right: 1px solid rgb(224, 224, 224);
        }
        .resource-form__option-gpu-add {
            right: 0;
            border-left: 1px solid rgb(224, 224, 224);
        }

        .option-content__option-slider {
            display: flex;
            margin-top: 10px;
        }
        .option-slider__sxf-slider {
            flex: 1;
            padding: 0 10px;
        }
        .option-slider__text {
            text-align: center;
            color: #adadad;
        }
        // 饿了么组件样式修改
        .el-slider__bar {
            background-color: #1db83f;
        }
        .el-slider__button {
            background-color: #1db83f;
            border-color: #78e28f;
        }
        .el-slider__button-wrapper {
            z-index: 50;
        }
    }
    .sxf-slider__tooltip {
        background-color: transparent !important;
        color: #1db83f !important;
        padding: 0 !important;
        .popper__arrow {
            display: none;
        }
    }
}
</style>

<script>

import store from 'src/vuex/store';
let userID = store.state.userId;

const VGPU_INFO_USER = 'auth/v1/vGpuInfo';
const VGPU_INFO_PROJECT = `auth/v1/user/${userID}/vGpuMemoryRemain`;

export default {
    props: {
        usePage: {
            type: String,
            default: ''
        },
        showGpu: {
            type: Boolean,
            default: true
        },
        isEdit: {
            type: Boolean,
            default: true
        },
        labelName: {
            type: String,
            default: _('资源分配')
        },
        defaultWidth: {
            type: [String, Number],
            default: '336'
        },
        submitData: {
            type: Object,
            default: () => {
                return {
                    cpuNum: 1,
                    memorySize: 1,
                    vGpuMemory: 0,
                    vGpuDisplayName: '',
                    vGpuNum: 0
                };
            }
        },
        allowDecimals: {
            type: Boolean,
            default: false
        },
        resourceNums: {
            type: Object,
            default: () => {
                return {
                    cpu: 256,
                    memory: 256,
                    gpu: 256
                };
            }
        },
        initialVgpu: {
            type: Number,
            default: 0
        },
        initialVgpuMemory: {
            type: Number,
            default: 0
        },
    },

    data () {
        return {
            vGpuDisplayNameOpts: [],

            vGpuMemoryRemain: 0
        }
    },

    computed: {

        vGpuDisplayNameConfig () {
            return this.vGpuDisplayNameOpts.find(item => item.vGpuDisplayValue === this.submitData.vGpuDisplayName) || {};
        },
        maxvGpuNum () {
            if (!this.submitData.vGpuDisplayName) {
                return 0;
            }
            let vGpuMemory = this.vGpuDisplayNameConfig?.vGpuMemory || 0;
            return Math.floor((this.maxvGpuMemoryRemain / vGpuMemory) || 0);
        },
        maxvGpuMemoryRemain () {
            let surplusVgpuMemory = this.vGpuMemoryRemain || 0;
            return this.isEdit ? (surplusVgpuMemory + this.initialVgpuMemory) : surplusVgpuMemory;
        },
        usePageIsUser () {
            return this.usePage === 'user';
        }
    },

    mounted () {
        this.getVgpuInfo();
    },

    watch:{
        'submitData.vGpuDisplayName': {
            handler () {
                this.vGpuNumVail();
            }
        },
        'submitData.vGpuNum': {
            handler () {
                this.vGpuNumVail();
            }
        },
        'maxvGpuMemoryRemain': {
            handler () {
                this.updateVgpuName();
            }
        }
    },

    methods: {
        async getVgpuInfo () {
            let url = this.usePageIsUser ? VGPU_INFO_USER : VGPU_INFO_PROJECT;
            let jsonData = await this.$ajax.get(url);
            if (!jsonData.success) {
                return this.$showErr(jsonData.message);
            }
            this.vGpuMemoryRemain = jsonData.data?.vGpuMemoryRemain || 0;
            this.vGpuDisplayNameOpts = jsonData.data?.vGpuDisplayNames || [];
        },

        updateVgpuName () {
            let vm = this;
            this.vGpuDisplayNameOpts = this.vGpuDisplayNameOpts.filter(item => Math.floor((vm.maxvGpuMemoryRemain / item.vGpuMemory) || 0) > 0) || [];
        },

        onChangeGpu (val) {
            let sum = this.submitData.vGpuMemory + Number(val);
            if (sum < 0) {
                return;
            }
            this.submitData.vGpuMemory = sum;
        },

        vGpuNumVail () {
            if (this.usePageIsUser) {
                return;
            }
            this.updateDataVgpuMemory();
            if (this.submitData.vGpuNum > this.maxvGpuNum) {
                this.$nextTick().then(() => {
                    this.submitData.vGpuNum = this.maxvGpuNum;
                })
            }
        },

        isValid () {
            if (!this.$refs.form.isValid()) {
                this.$showErr(this.$refs.form.getInvalidMsgs());
                return false;
            }
            return true;
        },

        setJsonValue (data) {
            Object.assign(this.submitData, data);
        },

        updateDataVgpuMemory () {
            this.submitData.vGpuMemory = this.submitData.vGpuNum * this.vGpuDisplayNameConfig?.vGpuMemory || 0;
        },

        getJsonValue () {
            if (!this.usePageIsUser) {
                this.updateDataVgpuMemory();
            }
            return this.submitData;
        }
    }
};
</script>
